<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue 测试实例</title>
  <script src="https://unpkg.com/vue@next"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script>
</head>

<style>
  body {
    margin: 30px;
  }

</style>

<body>
<div id="demo">
  <input v-model="query" />
  <transition-group
          name="staggered-fade"
          tag="ul"
          :css="false"
          @before-enter="beforeEnter"
          @enter="enter"
          @leave="leave"
  >
    <li
            v-for="(item, index) in computedList"
            :key="item.msg"
            :data-index="index"
    >
      {{ item.msg }}
    </li>
  </transition-group>
</div>


<script>
  const Demo = {
    data() {
      return {
        query: '',
        list: [
          { msg: 'Bruce Lee' },
          { msg: 'Jackie Chan' },
          { msg: 'Chuck Norris' },
          { msg: 'Jet Li' },
          { msg: 'Kung Fury' }
        ]
      }
    },
    computed: {
      computedList() {
        var vm = this
        return this.list.filter((item) => {
          return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
        })
      }
    },
    methods: {
      beforeEnter(el) {
        el.style.opacity = 0
        el.style.height = 0
      },
      enter(el, done) {
        gsap.to(el, {
          opacity: 1,
          height: '1.6em',
          delay: el.dataset.index * .15,
          onComplete: done
        })
      },
      leave(el, done) {
        gsap.to(el, {
          opacity: 0,
          height: 0,
          delay: el.dataset.index * .15,
          onComplete: done
        })
      }
    }
  }

  Vue.createApp(Demo).mount('#demo')
</script>
</body>
</html>

